<script setup lang="ts">
const { title = '-' } = defineProps<{
  title: string;
}>()

// 点击左按钮回调
// leftClickHander: ()=> void = () => {}
const emits = defineEmits<{
  'leftClickHandler':[title:string]
}>()
</script>

<template>
  <div class="navbar">
    <button @click="emits('leftClickHandler',title)">左按钮</button>
    <h3>{{ title }}</h3>
    <!-- 插槽 - 接受传递过来的结构 -->
    <slot>
      <button>右按钮</button>
    </slot>
  </div>
</template>

<style scoped>
.navbar {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background-color: pink;
}
</style>